<template>
  <PanerGrid @onSubmit="handleSubmit" @onReset="handleReset">
    <template v-slot:search>
      <div class="d-group-items d-layout-grid d-layout-grid-4">
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">名称</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.name" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">路径</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.path" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">布局</label>
            </div>
            <div class="d-form-el">
              <select v-model="search.layout" class="d-form-select">
                <option v-for="item in layoutCollection" :key="item.id" :value="item.id">{{ item.text }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">所属微应用</label>
            </div>
            <div class="d-form-el">
              <select v-model="search.mid" class="d-form-select">
                <option v-for="item in mappList" :key="item.id" :value="item.id">{{ item.text }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">状态</label>
            </div>
            <div class="d-form-el">
              <select v-model="search.status" class="d-form-select">
                <option v-for="item in statusList" :key="item.id" :value="item.id">{{ item.text }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">标签</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.labels" @keyup.enter="handleSubmit" class="d-form-input" type="text" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">描述</label>
            </div>
            <div class="d-form-el">
              <input v-model="search.description" @keyup.enter="handleSubmit" class="d-form-input" />
            </div>
          </div>
        </div>
        <div class="d-grid-item">
          <FormCalendar
            v-model="search.createTime"
            label="创建时间"
            labelWidth="80px"
            class="d-form-group-flex"
          ></FormCalendar>
        </div>
        <div class="d-grid-item">
          <FormCalendar
            v-model="search.updateTime"
            label="修改时间"
            labelWidth="80px"
            class="d-form-group-flex"
          ></FormCalendar>
        </div>
        <div v-if="false" class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">创建人</label>
            </div>
            <div class="d-form-el">
              <input class="d-form-input" @keyup.enter="handleSubmit" />
            </div>
          </div>
        </div>
        <div v-if="false" class="d-grid-item">
          <div class="d-form-group d-form-group-flex">
            <div class="d-form-label d-text-right">
              <label class="label-text">修改人</label>
            </div>
            <div class="d-form-el">
              <input class="d-form-input" @keyup.enter="handleSubmit" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-slot:header>
      <div class="d-paner-caption">
        <span class="d-caption-text">页面列表</span>
        <div class="d-bar-tools d-bar-tools-condensed">
          <span class="d-tools-item"><a class="d-btn d-btn-plain-sign" :href="getMicroPath('#/dview/page/item')">添加</a></span>
          <span @click="handleDelChecked" class="d-tools-item"><button class="d-btn d-btn-plain-sign" type="button">删除</button></span>
          <span class="d-tools-item"><a class="d-btn d-btn-plain-sign" :href="getMicroPath('#/dview/page/release/list')">版本</a></span>
        </div>
      </div>
      <div class="d-bar-tools d-bar-tools-right d-bar-tools-condensed">
        <a @click="handleReload" class="d-tools-item"><span class="d-btn d-btn-plain-sign d-btn-square-sm d-btn-flex"><RefreshIcon /></span></a>
      </div>
    </template>
    <template v-slot:body>
      <Grid v-model="list" ref="gridList" :request="gridRequest" :pageSize="15" @onClickPage="handleClickPage">
        <GridColumn :width="48" type="checkbox" />
        <GridColumn :width="60" type="index" label="序号" />
        <GridColumn field="name" label="名称">
          <template v-slot:body="scope">
            <a :href="getMicroPath('#/page/view/' + scope.id)" target="_blank" class="d-text-theme d-text-linker">{{ scope.name || '-' }}</a>
          </template>
        </GridColumn>
        <GridColumn field="name" label="路径" width="220">
          <template v-slot:body="scope">
            {{ scope.path }}
          </template>
        </GridColumn>
        <GridColumn field="code" label="编码" width="220" />
        <GridColumn field="layout" label="布局" format="select" :select="layoutCollection" width="90" />
        <GridColumn field="mid" label="所属微应用" format="select" :select="mappSelect" width="180" />
        <GridColumn field="status" label="状态" format="select" :select="statusList" width="70" />
        <GridColumn field="updateTime" label="修改时间" format="datetime|yyyy-MM-dd HH:mm:ss" width="160" />
        <!-- <GridColumn field="updateUser" label="修改人" /> -->
        <GridColumn field="createTime" label="创建时间" format="datetime|yyyy-MM-dd HH:mm:ss" width="160" />
        <!-- <GridColumn field="createUser" label="创建人" /> -->
        <GridColumn field="action" :width="210" label="操作">
          <template v-slot:body="scope">
            <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
              <a :href="getMicroPath('#/page/design/' + scope.id)" title="设计" class="d-tools-item d-text-theme" target="_blank"><ComponentIcon size="sm" /></a>
              <a :href="getMicroPath('#/dview/page/item/' + scope.id)" class="d-tools-item d-text-theme"><EditIcon size="sm" /></a>
              <a :href="getMicroPath('#/saas/page/' + scope.id)" title="版本浏览" class="d-tools-item d-text-theme" target="_blank"><PreviewIcon size="sm" /></a>
              <a @click="handleRelease(scope)" class="d-tools-item d-text-theme" title="发布"><TopIcon size="sm" /></a>
              <a @click="handleCopy(scope)" class="d-tools-item d-text-theme" title="复制"><CopyIcon size="sm" /></a>
              <a :href="getMicroPath('#/dview/page/release/list?vpid=' + scope.id)" title="版本列表" class="d-tools-item d-text-theme"><ListStyleIcon size="sm" /></a>
              <a :href="getMicroPath('#/saas/practice/' + scope.id)" title="版本演练" class="d-tools-item d-text-theme" target="_blank"><CodeIcon size="md" /></a>
              <a @click="handleDelItem(scope)" class="d-tools-item d-text-theme"><DeleteIcon size="sm" /></a>
            </div>
          </template>
        </GridColumn>
      </Grid>
      <Dialoger v-model="isShowRelease" :onConfirm="handleSubmitRelease" :dialogCls="'d-paner-sm'" title="发布">
        <template v-slot:body>
          <FormGroup label="版本标题" :col="12">
            <FormInput v-model="releaseName" />
          </FormGroup>
          <FormGroup label="版本描述" :col="12">
            <FormTextarea v-model="releaseDesc" />
          </FormGroup>
        </template>
      </Dialoger>
    </template>
  </PanerGrid>
</template>

<script>
import { PanerGrid } from '@daelui/vdog/dist/pages.js'
import { Grid, GridColumn, Dialoger, FormCalendar, Pager, FormGroup, FormInput, FormTextarea } from '@daelui/vdog/dist/components.js'
import { RefreshIcon, EditIcon, DeleteIcon, ComponentIcon, CopyIcon, PreviewIcon, CodeIcon, ListStyleIcon, TopIcon } from '@daelui/vdog/dist/icons.js'
import { objecter, dater, strer } from '@daelui/dogjs/dist/components.js'
import { zh as locale } from '@daelui/dogjs/dist/locale.js'
import pageSer, { api } from '../../../service/action/viewpage.action.js'
import mappSer from '@/service/action/mapp.action.js'
import vrSer from '@/service/action/viewrelease.action'
import { getter } from '../../../service/stock/index.js'
import layoutCollection from './components/layouts'

export default {
  name: 'dview-page-list',

  components: {
    Dialoger,
    PanerGrid,
    Grid,
    GridColumn,
    RefreshIcon,
    EditIcon,
    DeleteIcon,
    ComponentIcon,
    CopyIcon,
    TopIcon,
    PreviewIcon,
    CodeIcon,
    ListStyleIcon,
    FormCalendar,
    Pager,
    FormGroup, FormInput, FormTextarea
  },

  data () {
    return {
      // 搜索条件
      search: {
        name: '',
        path: '',
        layout: '',
        mid: '',
        status: '',
        labels: '',
        description: '',
        createTime: '',
        updateTime: ''
      },
      list: [],
      // 表格请求配置
      gridRequest: {
        url: api.queryListPage.url, // 请求地址
        method: api.queryListPage.method, // 请求方式
        params: {} // 请求参数
      },
      // 布局模式
      layoutCollection: [{id: '', text : '全部'}, ...layoutCollection],
      // 状态
      statusList: getter.statusList(),
      // 微应用
      mappList: [],
      mappSelect: [],
      isShowRelease: false, // 是否显示发布框
      releaseName: '',
      releaseDesc: '', // 发布描述
    }
  },

  methods: {
    /**
     * @function 查询事件处理
    */
    handleSubmit () {
      this.$refs.gridList.reload(this.search)
    },
    /**
     * @function 刷新
    */
    handleRefresh () {
      this.$refs.gridList.refresh()
    },

    /**
     * @function 重置事件
    */
    handleReset () {
      this.search = {
        name: '',
        path: '',
        layout: '',
        mid: '',
        status: '',
        labels: '',
        description: '',
        createTime: '',
        updateTime: ''
      }
    },

    /**
     * @function 删除选定的数据
    */
    handleDelChecked () {
      let items = this.$refs.gridList.getChecked()
      this.removeItems(items)
    },

    /**
     * @function 删除单条数据
    */
    handleDelItem (item) {
      this.removeItems([item])
    },

    /**
     * @function 删除多条数据
    */
    removeItems (items) {
      items = Array.isArray(items) ? items : []
      if (items.length < 1) {
        Dialoger.warn(locale.list.selectOne)
        return false
      }
      Dialoger.confirm(locale.message.confirmDelete).then(b => {
        if (!b) {
          return false
        }
        items = items.map(item => item.id)
        pageSer.removeItem(items).then(result => {
          this.$refs.gridList.reload()
        })
      })
    },

    // 复制
    handleCopy (item) {
      let defer = null
      let state = objecter.clone(item)
      delete state.createTime
      delete state.updateTime
      delete state.id
      Dialoger.confirm(locale.message.confirmOperation).then(b => {
        if (!b) {
          return false
        }
        // 添加
        state.name = state.name + '(复制)'
        defer = pageSer.addItem(state)
        defer.then(result => {
          if (result.success) {
            this.$message({
              message: locale.action.success,
              type: 'success',
              showClose: true
            })
            this.handleReload()
          } else {
            Dialoger.danger(locale.action.fail)
          }
        })
      })
    },

    /**
     * @function 重新加载
    */
    handleReload () {
      this.$refs.gridList.reload(this.search)
    },

    /**
     * @function 分页点击事件
    */
    handleClickPage (data) {
      // data = data || {}
      // this.handleReload()
    },

    // 发布
    handleRelease (node) {
      this.pageState = node
      this.releaseDesc = ''
      this.releaseName = dater.format(new Date(), 'yyyy-MM-dd HH:mm:ss'),
      this.isShowRelease = true
    },

    // 发送发布
    handleSubmitRelease () {
      let state = objecter.clone(this.pageState)
      // 页面元数据
      vrSer.addItem({
        vpid: state.id,
        releaseName: this.releaseName,
        description: this.releaseDesc,
        releaseVersion: dater.format(new Date(), 'yyyyMMddHHmmss') + strer.urid(4, false, true),
        name: state.name,
        path: state.path,
        code: state.code,
        layout: state.layout,
        meta: state.meta,
        mid: state.mid,
        status: state.status,
        labels: state.labels
      }).then(result => {
        if (result.success) {
          this.$message({
            message: '发布成功',
            type: 'success',
            showClose: true
          })
        } else {
          this.$message({
            message: '发布失败',
            type: 'error',
            showClose: true
          })
        }
      })
    },
  },

  beforeMount () {
    // 微应用列表
    mappSer.queryAllListOption(true).then(list => {
      this.mappList = list
      this.mappSelect = [...list].slice(1)
    })
  },

  activated () {
    if (this.isInitKeep) {
      this.handleRefresh()
    }
    this.isInitKeep = true
  }
}
</script>

<style scoped>
.d-form-label {
  width: 80px;
}
</style>
